<template>
  <div class="box">
    <!-- 顶部 -->
    <div class="box1">
      <router-link to="/">
        <i class="jiantou iconfont icon-jiantou2"></i>
      </router-link>
      <h2 class="wode">日常检测</h2>
      <i class="shezhi1 iconfont icon-sousuo"></i>
    </div>
    <van-notice-bar left-icon="volume-o"
                    text="苗医温馨提醒：身体是革命的本钱，请大家注重自己的身体健康。万万不可把身体健康当儿戏；" />
    <div class="box2">
      <!-- 性别 -->
      <van-radio-group v-model="sex">
        <van-cell-group>
          <van-cell title="性别">
            <template #right-icon>
              <van-radio name="a">男</van-radio>
              <van-radio name="b">女</van-radio>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-cell-group>
        <!-- 身高 -->
        <van-field v-model="height"
                   type="digit"
                   label="身高"
                   placeholder="CM" />
      </van-cell-group>

      <van-cell-group>
        <!-- 体重 -->
        <van-field v-model="weight"
                   type="number"
                   label="体重"
                   placeholder="KG" />
      </van-cell-group>

      <!-- 血糖 -->
      <van-radio-group v-model="xuetang">
        <van-cell-group>
          <van-cell title="血糖">
            <template #right-icon>
              <van-radio name="gao">血糖偏高</van-radio>
              <van-radio name="zhong">正常</van-radio>
              <van-radio name="di">血糖偏低</van-radio>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>

      <!-- 血脂 -->
      <van-radio-group v-model="xuezhi">
        <van-cell-group>
          <van-cell title="血脂">
            <template #right-icon>
              <van-radio name="chou">血脂偏稠</van-radio>
              <van-radio name="zhong">正常</van-radio>
              <van-radio name="xi">血脂偏稀</van-radio>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>

      <!-- 血压 -->
      <van-radio-group v-model="xueya">
        <van-cell-group>
          <van-cell title="血压">
            <template #right-icon>
              <van-radio name="gao">血压偏高</van-radio>
              <van-radio name="zhengchang">正常</van-radio>
              <van-radio name="di">血压偏低</van-radio>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>

      <!-- 睡眠情况 -->
      <van-radio-group v-model="shuimianqk">
        <van-cell-group>
          <van-cell title="睡眠情况">
            <template #right-icon>
              <van-radio name="shimian">失眠</van-radio>
              <van-radio name="zhengchang">正常</van-radio>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>

    <!-- 展示计算结果 -->
    <div class="showCount"
         v-show="showResult">
      <div class="score">{{result.count}} 分</div>
      <div class="description">尊敬的{{userInfo.username}}{{result.sex}}，{{result.message}}</div>
    </div>

    <!-- 遮罩层 -->
    <van-overlay :show="showOverlay">
      <div class="wrapper">
        <div class="block">
          <van-image width="120"
                     height="120"
                     round
                     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201701%2F20%2F20170120142723_ufvdj.thumb.400_0.gif&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623287809&t=3b18a3e3063448ca2475c49c5c4f1629" />
          <div id="jisuan"
               class="jisuan">努力计算中</div>
        </div>
      </div>
    </van-overlay>

    <button class="tijiao"
            @click="tijiao">提交</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sex: "a",
      height: "",
      weight: "",
      xuetang: "zhong",
      xuezhi: "zhong",
      shuimianqk: "zhengchang",
      xueya: "zhengchang",
      showOverlay: false,
      result: {},
      userInfo: {},
      showResult: false
    };
  },
  methods: {
    tijiao () {
      this.showResult = false
      if (this.height == "" || this.weight == "") {
        this.$message.fail("身高或体重不能为空")
        return
      }
      this.showOverlay = true
      this.jisuan()
      this.result = this.jisuanResult()
      this.userInfo = JSON.parse(window.localStorage.getItem('userData'))
      if (this.jisuanResult().count >= 75) {
        this.result.message = "您的身体非常健康请继续保持😀!"
      } else {
        this.result.message = "您的身体处于亚健康需注意了😔!"
      }
      setTimeout(() => {
        this.showResult = true
      }, 2900)
    },
    jisuan () {
      let count = 1;
      setTimeout(() => {
        this.showOverlay = false
        clearInterval(timer)
        this.$message.success("计算成功")
      }, 3000)
      let jisuan = document.getElementById('jisuan')
      jisuan.innerHTML = "努力计算中"
      var timer = setInterval(() => {
        if (count == 5) {
          jisuan.innerHTML = "努力计算中"
          count = 1
        }
        jisuan.innerHTML += "·";
        count++;
      }, 700)
    },
    jisuanResult () {
      let count = 0;
      if (this.xuetang == "gao" || this.xuetang == "di") {
        count += 10
      } else {
        count += 25
      }
      if (this.xuezhi == "chou" || this.xuezhi == "xi") {
        count += 10
      } else {
        count += 25
      }
      if (this.xueya == "gao" || this.xueya == "di") {
        count += 10
      } else {
        count += 25
      }
      if (this.shuimianqk == "shimian") {
        count += 5
      } else {
        count += 25
      }
      if (this.sex == "a") {
        return { sex: "先生", count: count, message: "" }
      } else {
        return { sex: "女士", count: count, message: "" }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// .box {
//   // background: rgba(0, 186, 173, 1);
// }
.box1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  position: relative;
  //  display: flex;
  // justify-content: space-around;
}
/deep/.box2 .van-radio {
  margin-right: 8px;
}
.jiantou {
  position: absolute;
  color: black;
  font-weight: bold;
}
.wode {
  margin-left: 40%;
  font-weight: bold;
  position: absolute;
}
.shezhi {
  margin-left: 80%;
  font-size: 18px;
  color: black;
  position: absolute;
}
.shezhi1 {
  float: right;
  font-size: 22px;
  margin-top: 1px;
  display: block;
  margin-right: 15px;

  color: black;
}
.box2 {
  width: 100%;
  height: 500px;
  margin-top: 5px;
}
.xueya {
  font-size: 80px;
  color: rgba(0, 186, 173, 1);
  margin-left: 8px;
}
.fuxuan {
  margin-left: 30%;
  top: 60px;
  position: absolute;
  z-index: 999;
}
.tijiao {
  width: 100%;
  height: 40px;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  position: fixed;
  bottom: 0;
  z-index: 999;
  font-size: 16px;
  font-weight: bold;
  border: none;
}
.xueyang {
  border-bottom: 1px solid rgb(230, 228, 228);
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/deep/.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
  border-radius: 50%;
}
.jisuan {
  color: #fff;
  text-align: center;
  margin-top: 20px;
}
/deep/div.van-notice-bar {
  width: 100%;
  margin-top: 6px;
  box-sizing: border-box;
}
.showCount {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  height: 230px;
}
.showCount .score {
  margin-bottom: 20px;
  font-size: 80px;
  font-style: italic;
  color: orange;
  text-shadow: 2px 2px 10px orange;
}
.showCount .description {
  padding: 0 15px;
  text-align: center;
  font-size: 15px;
  color: skyblue;
  text-shadow: 2px 2px 3px skyblue;
}
</style>